<template>
  <Sider class="sider" ref="side" hide-trigger collapsible :collapsed-width="80" v-model="store.isCollapse" width="256">
    <div class="sider-logo-dark sider-logo">
      <a href="/">
        <img :src="siderLogoUrl">
      </a>
    </div>
    <Menu ref="side_menu" theme="dark" width="256" :class="menuitemClasses"
          :active-name="router.currentRoute.value.path">
      <div v-for="(item,index) in menu_data" :key="item.id">
        <MenuItem v-if="item.child.length === 0 && !store.isCollapse" :name="item.path" @click="jumpUrl(item)">
          <Icon :type="item.icon"></Icon>
          <span style="margin-left: 2px">{{ item.name }}</span>
        </MenuItem>
        <MiddleMenu v-if="item.child.length!==0 && !store.isCollapse" :menu-list="item"></MiddleMenu>
        <!--折叠-->
        <Tooltip transfer v-if="store.isCollapse && item.child.length === 0" :content="item.name" placement="right">
          <MenuItem :name="item.path" @click="jumpUrl(item)">
            <Icon :type="item.icon"></Icon>
            <span style="margin-left: 2px">{{ item.name }}</span>
          </MenuItem>
        </Tooltip>
        <Dropdown v-if="store.isCollapse && item.child.length!==0"
                  placement="right-start">
          <MenuItem :name="item.path" style="margin-right: 6px">
            <Icon :type="item.icon"/>
          </MenuItem>
          <template #list>
            <MiddleCollapseMenu
                :menu-list="item">
            </MiddleCollapseMenu>
          </template>
        </Dropdown>
      </div>
    </Menu>
  </Sider>
</template>

<script setup>
import {computed, getCurrentInstance, onMounted, onUpdated, ref} from "vue";
import {commonStore} from "@/store/store";
import {getAssetsFile, getStore} from "@/api/utils";
import router from "@/router";
import MiddleMenu from "@/components/main/components/middle-menu";
import MiddleCollapseMenu from "@/components/main/components/middle-collapse-menu";
import {CommonServices} from "@/api/common";

const store = commonStore()
const {proxy} = getCurrentInstance();
const menuitemClasses = computed(() => {
  return [
    'menu-item',
    store.isCollapse ? 'collapsed-menu' : ''
  ]
})

const siderLogoUrl = computed(() => {
  return store.isCollapse
      ?
      getAssetsFile('img/logo/logo-small.png')
      :
      getAssetsFile('img/logo/logo-dark.png');
})

// 调用Side组件的toggleCollapse()方法
const collapseSide = () => {
  proxy.$refs.side.toggleCollapse();
}

// 暴露collapseSide()方法给父组件调用
defineExpose({
  collapseSide
})

// 使用计算属性获取menuData
const menu_data = computed(() => {
  return store.menuData;
})

// 跳转菜单
const jumpUrl = (item) => {
  console.log(item)
  if (item.component !== '') {
    store.addTagsNavList({
      title: item.name,
      name: item.path.slice(1),
      path: item.path
    });
  }
  router.push({path: item.path})
}

onUpdated(() => {
  proxy.$refs.side_menu.updateActiveName();
  proxy.$refs.side_menu.updateOpened();
})

onMounted(() => {
  CommonServices.GetAccountAuths();
})


</script>

<style scoped>
@import "./side-menu.less";
</style>
